<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/metro/easyui.css" rel="stylesheet" type="text/css">
    <link href="/h5/plugin/jquery-easyui-1.9.4/themes/icon.css" rel="stylesheet" type="text/css">
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/h5/plugin/jquery-easyui-1.9.4/plugins/jquery.international.js" type="text/javascript"></script>
    <script src="/index/easyuiLanguagePack" type="text/javascript"></script>
    <script src="/index/languagePack/auth/role" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.const.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.formatter.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.js" type="text/javascript"></script>
    <script src="/h5/js/easyms/easyms.ajax.js" type="text/javascript"></script>
    <script type="text/javascript">

        // 角色管理

        // ================接口================S
        const roleBaseUrl = "/api/auth/role";
        const searchUrl = roleBaseUrl + "/list";
        const insertUrl = roleBaseUrl + "/insert";
        const updateUrl = roleBaseUrl + "/update";
        const deleteUrl = roleBaseUrl + "/delete";
        // ================接口================E

        // ================组件================E
        // 数据表格ID
        let gridId = "roleGrid";
        // 数据表格查询表单ID
        let searchFormId = "searchForm";
        // 菜单信息表单ID
        let saveFormId = "saveForm";
        // 菜单信息编辑对话框ID
        let dialogId = "roleDialog";
        // ================组件================E

        let saveUrl;
        let roleCurrentRow;
        let roleSelectedRows;

        let buttons = [
            {
                iconCls: 'icon-search',
                handler: search,
                text: langCommon.search
            }, {
                iconCls: 'icon-cancel',
                handler: resetSearchFrom,
                text: langCommon.resetConditions
            }, {
                iconCls: 'icon-add',
                handler: openRoleAddDialog,
                text: langCommon.add
            }, {
                iconCls: 'icon-edit',
                handler: openRoleModifyDialog,
                text: langCommon.edit
            }, {
                iconCls: 'icon-remove',
                handler: deleteRole,
                text: langCommon.delete
            }
        ];

        function initRoleGrid() {
            let columns = [[
                {field: 'roleName', title: lang.name, width: 100, align: 'left',sortable:true},
                {field: 'createTime', title: langCommon.createTime, width: 100, align: 'left', formatter: formatDateTime, sortable:true},
                {field: 'updateTime', title: langCommon.updateTime, width: 100, align: 'left', formatter: formatDateTime, sortable:true},
                {field: 'authMenuCount', title: lang.menuList, width: 100, align: 'left', formatter: formatAuthMenuCount}
            ]];
            let params = {};
            initAndCallback(gridId, searchUrl, params,columns, searchCallback);
        }

        // 查询数据
        function search() {
            let params = {};
            ajaxPostLoadWithFormAndCallback(searchFormId, gridId, searchUrl, params, searchCallback);
        }

        // 查询数据回调
        function searchCallback() {
            addButtons4pageTB(gridId, buttons);
        }

        // 删除数据
        function deleteRole() {
            roleSelectedRows = getSelections(gridId);
            if (roleSelectedRows.length == 0) {
                euAlert(langCommon.info, langCommon.message.selectDelDataMsg);
                return;
            }
            euConfirm(langCommon.info, langCommon.message.confirmDelMsg, deleteRoleCallback);
        }

        function deleteRoleCallback() {
            let params = {
                roleId:roleCurrentRow.roleId
            };
            ajaxPostBodyAndCallback(deleteUrl, params, search);
        }

        // 保存数据
        function saveRole() {
            showProgress();
            let params = getFormData(saveFormId);
            let accessList = $('#accessList').combotree('getValues');
            params.accessList = accessList;
            ajaxPostBodyAndCallback(saveUrl, params, saveRoleCallback);
        }

        function saveRoleCallback() {
            closeProgress();
            search();
            closeRoleSetDialog();
        }

        // 打添加对话框
        function openRoleAddDialog() {
            resetSaveFrom();
            saveUrl = insertUrl;
            openDialog(dialogId, langCommon.add);
            loadAccessComboTree(0);
        }

        // 打开编辑对话框
        function openRoleModifyDialog() {
            resetSaveFrom();
            saveUrl = updateUrl;
            openDialogAndFillInFormWithRowData(dialogId, saveFormId, roleCurrentRow, langCommon.edit);
            loadAccessComboTree(roleCurrentRow.roleId);
        }

        /**
         * 加载权限树
         * @param roleId
         */
        function loadAccessComboTree(roleId){
            ajaxGetAndReturn('/api/auth/menu/getCheckedAuthMenuTree?roleId=' + roleId,{},function(data){
                $('#accessList').combotree({
                    data: data,
                    lines: true,
                    multiple:true,
                    checkbox: true,
                    textField: "text",
                    cascadeCheck: true
                });
            });

        }

        // 关闭对话框
        function closeRoleSetDialog() {
            closeDialog(dialogId);
        }

        // 重置搜索表单数据
        function resetSearchFrom() {
            resetFrom(searchFormId);
        }

        // 重置菜单信息表单数据
        function resetSaveFrom() {
            resetFrom(saveFormId);
        }

        function onRoleGridSelect(index, row) {
            roleCurrentRow = row;
        }

        function onDbClickRow(index,row){
            roleCurrentRow = row;
            openRoleModifyDialog();
        }

        function closeMenuSetDialog() {
            closeDialog("menuSetDialog");
        }

        // 页面初始化
        $(function () {

            // token
            token = getCookie(TOKEN_KEY);

            // Search Form
            setText("searchNameText", lang.name);
            // Edit Form
            setText("editNameText", lang.name);
            setText("editAccessListText", lang.menuList);
            // Dialog Button
            setEuButtonText("saveBtn", langCommon.confirm);
            setEuButtonText("closeBtn", langCommon.back);

            initRoleGrid();
            addKeyListener(13, search);
        });

    </script>
</head>
<body style="margin: 1px">
<table class="easyui-datagrid" data-options="
       pagePosition: 'top',
       fitColumns:true,
       pagination:true,
       singleSelect:true,
       fit:true,
       toolbar:'#tb',
       pageSize:40,
       onSelect:onRoleGridSelect,
       onDblClickRow:onDbClickRow",
       id="roleGrid">
</table>
<div id="tb">
    <form id="searchForm" method="post">
        <table cellspacing="2px">
            <tr>
                <td><b id="searchNameText"></b></td>
                <td><input class="easyui-textbox" name="roleName" size="20"/></td>
            </tr>
        </table>
    </form>

</div>

<div buttons="#dlg-buttons" class="easyui-dialog" data-options="iconCls:'icon-edit',modal:true,closed:true"
     id="roleDialog">

    <form id="saveForm" method="post">
        <input hidden="true" name="roleId"/>
        <table cellspacing="2px">
            <tr>
                <td id="editNameText" style="width: 100px;"></td>
                <td><input class="easyui-textbox" name="roleName" required="true" size="80"/></td>
            </tr>
            <tr>
                <td id="editAccessListText"></td>
                <td><input class="easyui-combotree" id="accessList" size="80"/></td>
            </tr>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a class="easyui-linkbutton" href="javascript:saveRole()" iconCls="icon-ok" id="saveBtn"></a>
    <a class="easyui-linkbutton" href="javascript:closeRoleSetDialog()" iconCls="icon-no" id="closeBtn"></a>
</div>

</body>
</html>